<template>
  <div>
    <!-- 头信息 -->
    <div class="header_warp">
      <div class="header_mes">
        <div class="headPhoto_warp">
          <img class="headPhoto" :src="userInfo.userUuid" />
          <div class="message">
            <div style="margin:5px 0;">{{userInfo.username}}</div>
            <div style="font-size:13px;color:#E3E2E2;">性别：{{userInfo.userSex}}</div>
          </div>
        </div>
        <div>
          <img @click="goChangeMessage" class="shareBtn" src="../assets/ic_myMes_change.png" />
        </div>
      </div>
      <div class="vipOpen" @click="goVipOpen">
        <div>
          <img style="width:15px;height:15px;" src="../assets/ic_vipLogo.png" />
          <div style="font-size:15px;margin: 0 5px;">VIP开通</div>
          <div v-if="userInfo.superVip==0">有效期至：{{userInfo.superVipMaturity}}</div>
          <div v-if="userInfo.commonVip==0&&userInfo.superVip==1">有效期至：{{userInfo.commonVipMaturity}}</div>
        </div>
        <div>
          <div style="font-size:12px;" v-if="userInfo.superVip==1&&userInfo.commonVip==1">去开通</div>
          <div style="font-size:12px;" v-if="userInfo.commonVip==0||userInfo.superVip==0">去续费</div>
          <img style="width:8px;height:10px;margin-left:5px;" src="../assets/ic_vipNext.png" />
        </div>
      </div>
    </div>
    <!-- 我的钱包 -->
    <div class="myMoney_wrap">
      <div class="myMoney_tit">
        <div style=" ">我的钱包</div>
        <div class="money_log" @click="goGlodLog()">
          <div>Q豆记录</div>
          <img src="../assets/ic_next.png" />
        </div>
      </div>
      <div class="money_num">
        <div>账户余额(Q豆)</div>
        <div class="money">{{userInfo.userGoldBalance}}</div>
      </div>
    </div>
    <div class="myMoney_type">
      <div style=" border-right: 1px solid #EEEDEA;" @click="goTopUp()">充值</div>
      <div style=" border-right: 1px solid #EEEDEA;" @click="goWithDraw">提现</div>
      <div @click="goVipOpen">兑换VIP</div>
    </div>
    <div class="subButton" @click="goActive">免费拿VIP卡</div>
    <tab selected="My"></tab>
  </div>
</template>
<script>
import * as API from "@/http/common/api";
import Tab from "@/components/tab/tab";
export default {
  name: "my",
  data() {
    return {
      userInfo: {  },
      isVip:false,
      isSvip:false,
    };
  },
  // 获取用户信息
  mounted() {
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    this.getMessage();
  },
  methods: {
    getMessage() {
      this.$http(API.myMessage, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.$localStorage.set(
              "userInfo",
              JSON.stringify(res.data.Message)
            );
            if(new Date(res.data.Message.commonVipMaturity).getTime()-new Date().getTime()>0){
              this.$localStorage.set( "vip",true);
              this.isVip  =true
            }else{
              this.$localStorage.set( "vip",false);
              this.isVip  =false
            }
            if(new Date(res.data.Message.superVipMaturity).getTime()-new Date().getTime()>0){
              this.isSvip  =true
              this.$localStorage.set( "svip",true);
            }else{
              this.isSvip  =false
              this.$localStorage.set( "svip",false);
            }
            this.userInfo =res.data.Message
          } else {
            this.$vux.toast.show({
              text: res.data.message,
              type: "text"
            });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
        });
    },
    goTopUp() {
      this.$router.push({ name: "TopUp", params: {} });
    },
    goVipOpen() {
      this.$router.push({ name: "OpenVip", params: {} });
    },
    goGlodLog() {
      this.$router.push({ name: "GlodLog", params: {} });
    },
    goChangeMessage() {
      this.$router.push({ name: "ChangeMessage", params: {} });
    },
    goWithDraw() {
      this.$router.push({ name: "Withdraw", params: {} });
    },
    goActive() {
      this.$router.push({ name: "Active", params: {} });
    }
  },
  components: { Tab }
};
</script>
<style scoped>
.header_mes {
  display: flex;
  justify-content: space-between;
  padding: 25px 20px 7px 20px;
  height: 112px;
  box-sizing: border-box;
}
.header_warp {
  background-image: url("http://q1vmrws7z.bkt.clouddn.com/754922e2-e6ec-4344-a084-4425d6f2fc4d");
  background-size: 109% 100%;
}
.headPhoto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 9.5px;
  box-sizing: border-box;
}
.headPhoto_warp {
  display: flex;
}
.message {
  width: 200px;
  color: #fff;
  font-size: 18px;
}
.shareBtn {
  width: 18px;
  height: 18px;
}
.vipOpen {
  display: flex;
  justify-content: space-between;
  width: 345px;
  background: rgb(40, 40, 40);
  align-items: center;
  height: 31px;
  box-sizing: border-box;
  margin: 0 auto;
  color: #fae793;
  padding: 0 10px 0 10px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  font-size: 11px;
}
.vipOpen > div {
  display: flex;
  align-items: center;
}
.myMoney_wrap {
  background: #fff;
  padding: 15px;
}
.myMoney_tit {
  display: flex;
  align-items: center;
  font-size: 15px;
  justify-content: space-between;
  margin-bottom: 16px;
}
.money_log {
  display: flex;
  align-items: center;
}
.money_log > img {
  width: 6px;
  height: 8px;
  margin-left: 4.5px;
}
.money_log > div {
  color: #999999;
  font-size: 12px;
}
.money_num {
  text-align: center;
  font-size: 13px;
}
.money {
  font-size: 32px;
  font-weight: 700;
  padding: 5px;
}
.myMoney_type {
  display: flex;
  text-align: center;
  background: #fff;
  border-top: 1px solid #eeedea;
  margin-bottom: 20px;
}
.myMoney_type > div {
  width: 33%;
  color: #fe4e0e;
  font-size: 14px;
  height: 43px;
  box-sizing: border-box;
  line-height: 43px;
}
.subButton {
  width: 345px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 7.5px;
  margin: 0 auto;
  background: #e83263;
}
</style>
